{extend name="layout/default" /}
{block name="title"}软件列表{/block}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">软件名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="" class="layui-input">
                </div>
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="">请选择状态</option>
                        <option value="0">启用</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="dataQuery">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<script type="text/html" id="dataToolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>

<script type="text/html" id="softwareBar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-info pear-btn-sm" lay-event="view"><i class="layui-icon layui-icon-link"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="softwareStatus">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="softwareStatus" {{ (d.status == 0) && "checked" }}>
</script>
{/block}

{block name="script"}
<script src="__STATIC__/component/clipboard/clipboard.min.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'popup'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let popup = layui.popup;
        // 初始化复制
        let clipboard = new ClipboardJS('.copy-btn');

        let MODULE_PATH = "/{:request()->controller()}";

        let cols = [
            [
                {
                    type: 'checkbox'
                },
                {
                    title: '软件名称',
                    field: 'name',
                    align: 'left',
                },
                {
                    title: '启用',
                    field: 'status',
                    align: 'center',
                    templet: '#softwareStatus'
                },
                {
                    title: '创建时间',
                    sort: true,
                    field: 'create_time',
                    align: 'center',
                },
                {
                    title: '操作',
                    toolbar: '#softwareBar',
                    align: 'center',
                    width: 150
                }
            ]
        ]

        table.render({
            elem: '#dataTable',
            url: MODULE_PATH + "/index",
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#dataToolbar',
            cellMinWidth: 110,
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print'],
            parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });

        table.on('tool(dataTable)', function(obj) {
            let event = {
                edit: () => {
                    window.edit(obj);
                },
                remove: () => {
                    window.remove(obj);
                },
                view: () => {
                    window.getApiUrl(obj);
                },
                default: () => {
                    console.log("[" + obj.event + "] 事件没有定义");
                }
            }
            let runEvent = obj && event[obj.event] ? event[obj.event] : event.default;
            runEvent();
        });

        table.on('toolbar(dataTable)', function(obj) {
            let event = {
                add: () => {
                    window.add();
                },
                refresh: () => {
                    window.refresh();
                },
                batchRemove: () => {
                    window.batchRemove(obj);
                },
                default: () => {
                    console.log("[" + obj.event + "] 事件没有定义");
                }
            }
            let runEvent = obj && event[obj.event] ? event[obj.event] : event.default;
            runEvent();
        });

        form.on('submit(dataQuery)', function(data) {
            table.reload('dataTable', {
                where: data.field,
                page:{ curr: 1 }
            });
            return false;
        });

        form.on('switch(softwareStatus)', function(obj) {
            let loading = layer.load();
            $.ajax({
                url: MODULE_PATH + "/setStatus",
                type: 'get',
                data: {id: this.value},
                success: function(res) {
                    layer.close(loading);
                    if(res.code === 0) {
                        popup.success(res.msg);
                    } else {
                        popup.failure(res.msg);
                    }
                }
            });
        });

        clipboard.on('success', function(e) {
            popup.success("复制成功");
        });

        clipboard.on('error', function(e) {
            popup.failure("复制失败");
        });

        let iframeArea = [common.isModile()?'100%':'800px', common.isModile()?'100%':'600px'];

        window.add = function() {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: iframeArea,
                content: MODULE_PATH + "/add"
            });
        }

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: iframeArea,
                content: MODULE_PATH + "/edit?id=" + obj.data.id
            });
        }

        window.remove = function(obj) {
            layer.confirm('确定要删除该信息？将会删除所属全部版本数据', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "/delete",
                    data: {ids: [obj.data.id]},
                    dataType: 'json',
                    type: 'post',
                    success: function(res) {
                        layer.close(loading);
                        if(Number(res.code) === 0){
                            popup.success(res.msg, function() {
                                obj.del();
                            });
                        } else {
                            popup.failure(res.msg);
                        }
                    },
                    error: function (res) {
                        layer.close(loading);
                        popup.failure("网络错误, 请重试");
                    }
                })
            });
        }

        window.batchRemove = function(obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                popup.success("未选中数据");
                return false;
            }
            let ids = [];
            for (let i = 0; i < data.length; i++) {
                ids.push(data[i].id);
            }
            layer.confirm('确定要删除这些信息？将会删除所属全部版本数据', {
                icon: 3,
                title: '提示'
            }, function(index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "/delete",
                    data: {ids},
                    dataType: 'json',
                    type: 'post',
                    success: function(res) {
                        layer.close(loading);
                        if(Number(res.code) === 0){
                            popup.success(res.msg, function() {
                                refresh();
                            });
                        } else {
                            popup.failure(res.msg);
                        }
                    },
                    error: function (res) {
                        layer.close(loading);
                        popup.failure("网络错误, 请重试");
                    }
                })
            });
        }

        window.getApiUrl = function(obj) {
            let loading = layer.load();
            $.ajax({
                url: MODULE_PATH + "/getApiUrl",
                type: 'get',
                data: {id: obj.data.id},
                success: function(res) {
                    layer.close(loading);
                    if(res.code === 0) {
                        layer.open({
                            type: 1,
                            title: '查看',
                            shade: 0.1,
                            area: [common.isModile()?'95%':'500px', common.isModile()?'30%':'150px'],
                            content: `
                            <form class="layui-form layui-form-pane" style="margin: 5px 5px;">
                                <div class="layui-form-item">
                                  <label class="layui-form-label">更新地址</label>
                                  <div class="layui-input-block">
                                    <input type="text" class="layui-input" value="${res.data.api_url}" readonly>
                                  </div>
                                </div>
                                <div class="bottom">
                                    <div class="button-container">
                                        <button type="button" class="pear-btn pear-btn-primary pear-btn-sm copy-btn" data-clipboard-text="${res.data.api_url}">
                                            <i class="icon pear-icon">&#xe696;</i>
                                            一键复制
                                        </button>
                                    </div>
                                </div>
                            </form>`
                        });
                    } else {
                        popup.failure(res.msg);
                    }
                }
            });
        }

        window.refresh = function(param) {
            table.reload('dataTable');
        }
    })
</script>
{/block}